<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link rel="stylesheet" href="../style/css/bootstrap.min.css">
  <link rel="stylesheet" href="../style/css/common.css">
</head>

<body>
  <div class="container">
    <ul class="nav nav-tabs mb20">
      <li><a href="save.html">存储数据库</a></li>
      <li><a href="compareFeature.html">特征码比对</a></li>
      <li class="active"><a href="searchFaces.html">数据库查找</a></li>
      <li><a href="imgList.html">数据库图像预览</a></li>
      <li><a href="../index.html">返回首页</a></li>
    </ul>
    <div class="panel panel-primary">
      <div class="panel-heading">对图像检测人脸并提取特征码(唯一)，然后在数据库中搜索相似的人脸返回搜索结果</div>
      <div class="panel-body">
        <div class="tips">
          <p>步骤一：从数据库找出相似人脸照片的featureId、和相似度</p>
          <p>通过人脸信息查找：</p>
          <p>调用的接口：detectAndSearchFaces</p>
          <p>接口参数：imgData（图像的二进制文件流）, similarty（相似度阀值，值区间0-1.0）, rows（最多返回的记录数目，最小值为1）, where（条件查询的where语句的条件部分，可为null，全表比对）</p>
          <p>举例：client.detectAndSearchFaces(imgBlob, 0.5, 1,null)</p>
          <p>通过特征码查找：</p>
          <p>调用的接口：client.detectAndGetCodeInfo(imgBlob)、client.searchFeatures(code);</p>
          <p>接口参数：imgData（图像的二进制文件流）、code（图像的特征码）</p>
        </div>
        <div class="tips">
          <p>步骤二：根据featureId得到数据库中相似的人脸信息中的照片md5，获取照片的信息详情并展示照片</p>
          <p>调用的接口：getImageRef</p>
          <p>接口参数：imageMd5（照片的md5），IMAGE（数据库表的主键值，可选：DEFAULT、IMAGE、FACE、FEATURE）</p>
          <p>举例：client.getImageRef(imageMd5, 'IMAGE')</p>
        </div>
        <div class="tips">
          <p>步骤三：根据featureId得到数据库中相似的人脸信息，在显示的照片上画出人脸的位置，以及相似度</p>
          <p>调用的接口：getFaceByFeatureId</p>
          <p>接口参数：featureId（步骤一得到的featureId）</p>
          <p>举例：client.getFaceByFeatureId(featureId)</p>
        </div>
        <div class="div-upload">
          <button type="button" class="btn btn-primary">上传照片</button>
          <input type="file" onchange="previewImage(this)" class="btn-file" />
          <div class="preview wid300 mt20"><img src="../style/images/icon1.png" alt="" /></div>
          <div class="mt20">
            返回记录条数：
            <select class="form-control" id="change_row">
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
              <option value="9">9</option>
              <option value="10">10</option>
            </select>
            相似度阀值：
            <select class="form-control" id="change_simi">
              <option value="0.5">0.5</option>
              <option value="0.1">0.1</option>
              <option value="0.2">0.2</option>
              <option value="0.3">0.3</option>
              <option value="0.4">0.4</option>
              <option value="0.6">0.6</option>
              <option value="0.7">0.7</option>
              <option value="0.8">0.8</option>
              <option value="0.9">0.9</option>
              <option value="1.0">1.0</option>
            </select>
            <button type="button" class="btn btn-primary compareBtn">通过人脸信息查找</button>
            <button type="button" class="btn btn-primary compareBtn2">通过特征码查找</button>
          </div>
        </div>
        <div>
          搜索耗时：<span class="time" style="color: #409eff; font-size: 18px;">0</span>秒，
          在数据库中找到了：<span class="num" style="color: #409eff; font-size: 18px;">0</span>张相似人脸，返回的相似人脸照片：
        </div>
        <div class="showDiv none mt20">
          <ul class="showImg">
          </ul>
        </div>
    </div>
    <!-- 提示语 -->
    <div class="box">
      <div class="msg">提示成功</div>
    </div>
  </div>
  <script src="../style/js/jquery.min.js"></script>
  <script src="../style/js/bootstrap.min.js"></script>
  <script src="config/thrift.js"></script>
  <script src="config/FaceDb.js"></script>
  <script src="config/FaceDb_types.js"></script>
  <script src="config/common.js"></script>
  <script src="js/preview.js"></script>
  <script>
    // 人脸对比
    rows = 1;
    similarty = 0.5;
    // 获取选中相似度阀值
    $('#change_simi').change(function () {
      similarty = $(this).val();
    })
    // 获取选中返回记录条数
    $('#change_row').change(function () {
      rows = $(this).val();
    })
    

    var startTime = '';
    $('.compareBtn').click(function () {
      // 清空标签内容
      $('.showDiv').hide();
      $('.showImg').empty();
      // 获取点击时，时间
      startTime = new Date().getTime();

      // 通过face查出相似人脸记录
      client.detectAndSearchFaces(imgBlob, similarty, rows, null, function (data) {
        if (data.length) {
          // 停止计时
          // 接口成功调用返回的参数的时间
          var endTime = '';
          endTime = new Date().getTime();
          var texTime = (Number(endTime) - Number(startTime)) / 1000;
          $('.time').text(texTime);

          // 调用loopData 函数
          loopData(data);
        } else {
          $('.box').show().delay(3000).fadeOut();
          $('.box').find('.msg').text('数据库查不到相似人脸');
          $('.time,.num').text('0');
        }
      }).fail(function (error) {
        $('.box').show().delay(3000).fadeOut();
        $('.box').find('.msg').text(error.responseText);
      });
    })


    // 通过featureId查出相似人脸记录
    $('.compareBtn2').click(function () {
      // 清空标签内容
      $('.showDiv').hide();
      $('.showImg').empty();
      // 获取点击时，时间
      startTime = new Date().getTime();

      // 查找出特征码
      client.detectAndGetCodeInfo(imgBlob,function (codeInfo) {
        try {
          // 通过特征码code，找到该图片的featureId
          var result = client.searchFeatures(codeInfo[0].code, similarty, rows, null);
          // 停止计时
          // 接口成功调用返回的参数的时间
          var endTime = '';
          endTime = new Date().getTime();
          var texTime = (Number(endTime) - Number(startTime)) / 1000;
          $('.time').text(texTime);

          if (result.length) {
            // 调用loopData 函数
            loopData(result);
          } else {
            $('.box').show().delay(3000).fadeOut();
            $('.box').find('.msg').text('数据库查不到相似人脸');
            $('.time,.num').text('0');
          }
        } catch (error) {
          console.log(error)
        }
      }).fail(function (error) {
        $('.box').show().delay(3000).fadeOut();
        $('.box').find('.msg').text(error.responseText);
      });
    })


    // 定义 循环feature 和 相似度 函数
    function loopData(result) {
      var featureArr = []; // 定义一个空数组，用于存储feature的md5;
      var preceArr = []; //定义一个空数组，用于存储 相似度
      for (let i = 0; i < result.length; i++) {
        // 相似度
        var similarity = result[i].similarity.toFixed(4);
        // 定义feature的md5
        var featureId = result[i].hexFeatureId;
        featureArr.push(featureId);
        preceArr.push({ 'similarity': similarity });

        // 调用 相似人脸查询结果 函数
        getImgShow(featureArr, preceArr);
      }
    }

    // 定义 相似人脸查询结果 函数
    function getImgShow(featureArr, preceArr) {
      // 定义并清空标签
      var showImg = $('.showImg')
      $('.showDiv').hide();
      showImg.children('li').remove();


      // 通过featureId，查找人脸信息
      var faceArr = [];
      for (var i = 0; i < featureArr.length; i++) {
        try { //成功调用
          var face = client.getFaceByFeatureId(featureArr[i]);
          faceArr.push(face);
        }catch (ouch){  //失败时调用
          console.log(ouch)
        }
        // 定义标签并初始化数据
        var numText = $('.num');
        numText.text(0);
        numText.text(faceArr.length);
      }

      
      // 定义一个空数组，存储展示人脸信息所需要的内容
      var newInfoArr = [];
      newInfoArr = faceArr.map((item, index) => {
        return { ...item, ...preceArr[index] };
      });
      

      // 定义一个对象，整合展示人脸信息
      var faceObj = {};
      for (var i = 0; i < newInfoArr.length; i++) {
        var key = newInfoArr[i].imageMd5;
        // 当 faceObj 没有被定义时，定义
        if (faceObj[key] == undefined) faceObj[key] = [];
        faceObj[key].push({ 'faceWid': newInfoArr[i].faceWidth, 'faceHei': newInfoArr[i].faceHeight, 
                            'left': newInfoArr[i].faceLeft, 'top': newInfoArr[i].faceTop,
                            'similarity' : newInfoArr[i].similarity});
      }


      for(var key in faceObj){
        // 查出照片信息
        try {  //成功调用
          var result = client.getImageRef(key, 'IMAGE');
          var format = result.format;
          var hei = result.height;
          // 默认照片高度为295px，获取照片缩小的比例
          var perce = Number(295) / hei;
        } catch (ouch) {  //失败时调用
          console.log(ouch)
        }


        // 查出照片的二进制流数据
        try{
          var path = client.getImageBytes(key);
          // 将任意值转为base64编码
          var img = 'data:image/' + format + ';base64,' + btoa(path);
          var imgHtml = '<img src="' + img + '" alt="" style="height: 295px;"/>'
        }catch(ouch){  //失败时调用
          console.log(ouch)
        }
        

        // 先循环调出照片，再将人脸信息根据照片查出的顺序插入
        var signHtml =  '';
        faceObj[key].forEach(ele => {
          var faceWid = ele.faceWid;
          var faceHei = ele.faceHei;
          var top = ele.top;
          var left = ele.left;

          signHtml += '<div class="signDiv" style="left:' + left * perce + 'px; top:' + top * perce + 'px; width:' + faceWid * perce + 'px; height:' + faceHei * perce + 'px"><p>'+ ele.similarity +'</p></div>';
        });

        var html = '<li>' + imgHtml + ''+ signHtml+'</li>'
        // 显示照片以及内容
        $('.showDiv').show();
        showImg.append(html);
      }
    }
  </script>
</body>

</html>